<template>
	<div class="container">
		<!-- 进度条 -->
		<div class="progress" v-if="!showResult" :style="{ width: width }"></div>
		<!-- 成绩统计 -->
		<div class="result_box" v-if="showResult">
			<img src="http://qnkf.laigl.com/mobilepng/quot.png" alt="" />
			<div class="reuslt_title">本次答题结果：</div>
			<ul>
				<li>
					· 共
					<span class="total">{{ subject.length }}</span>
					道
				</li>
				<li>
					· 答对
					<span class="right">{{ corrects }}</span>
					道
				</li>
				<li>
					· 答错
					<span class="wrongnum">{{ wrongs }}</span>
					道
				</li>
			</ul>
			<div class="backimgs">
				<img src="http://qnkf.laigl.com/mobilepng/back1.png" alt="" />
				<img src="http://qnkf.laigl.com/mobilepng/tuoyuan.png" alt="" />
			</div>
			<div class="confirmbtn" @click="quit">确定</div>
			<div class="againbtn" @click="tryagain">再来一次</div>
		</div>
		<van-swipe v-if="!showResult" @change="onChange" :touchable="false" ref="swiper" :loop="false">
			<van-swipe-item v-for="(item, index) in subject" :key="index">
				<!-- 未做时 -->
				<div class="content-normal" v-if="normal">
					<div class="title">{{ index + 1 }}.{{ item.name }}</div>
					<div class="question-box" v-if="item.option">
						<div class="question" @click="checkProper(index, item.op5, 'A')">
							<span class="serial">A.</span>
							{{ item.option[0].title }}
						</div>
						<div class="question" @click="checkProper(index, item.op5, 'B')">
							<span class="serial">B.</span>
							{{ item.option[1].title }}
						</div>
						<div class="question" @click="checkProper(index, item.op5, 'C')">
							<span class="serial">C.</span>
							{{ item.option[2].title }}
						</div>
						<div :id="item.option.length == 5 ? '' : 'last'" class="question" @click="checkProper(index, item.op5, 'D')">
							<span class="serial">D.</span>
							{{ item.option[3].title }}
							<div class="tools" v-if="item.option.length == 4">
								<!-- @click后加.stop阻止事件冒泡从而触发父盒子的事件 -->
								<span class="analysis" @click.stop="showPopup(index)">查看解析</span>
								<div class="left-button" @click.stop="quit">退出答题</div>
								<div class="right-button" @click.stop="nextQ">下一题</div>
							</div>
						</div>
						<div :id="item.option.length == 5 ? 'last' : ''" class="question" v-if="item.option.length == 5" @click="checkProper(index, item.op5, 'E')">
							<span class="serial">E.</span>
							{{ item.option[4].title }}
							<div class="tools">
								<!-- @click后加.stop阻止事件冒泡从而触发父盒子的事件 -->
								<span class="analysis" @click.stop="showPopup(index)">查看解析</span>
								<div class="left-button" @click.stop="quit">退出答题</div>
								<div class="right-button" @click.stop="nextQ">下一题</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 答案正确 -->
				<div class="content-correct" v-if="correct">
					<div class="title">{{ index + 1 }}.{{ item.name }}</div>
					<div class="question-box" v-if="item.option">
						<div :class="item.op5 == 'A' ? 'question-correct' : 'question'">
							<span class="serial">A.</span>
							{{ item.option[0].title }}
						</div>
						<div :class="item.op5 == 'B' ? 'question-correct' : 'question'">
							<span class="serial">B.</span>
							{{ item.option[1].title }}
						</div>
						<div :class="item.op5 == 'C' ? 'question-correct' : 'question'">
							<span class="serial">C.</span>
							{{ item.option[2].title }}
						</div>
						<div :id="item.option.length == 5 ? '' : 'last'" :class="item.op5 == 'D' ? 'question-correct' : 'question'">
							<span class="serial">D.</span>
							{{ item.option[3].title }}
							<div class="tools" v-if="item.option.length == 4">
								<span class="analysis" @click.stop="showPopup(index)">查看解析</span>
								<div class="left-button" @click.stop="quit">退出答题</div>
								<div class="right-button" @click.stop="nextQ">下一题</div>
							</div>
						</div>
						<div v-if="item.option.length==5" :id="item.option.length == 5 ? 'last' : ''" :class="item.op5 == 'E' ? 'question-correct' : 'question'">
							<span class="serial">E.</span>
							{{ item.option[4].title }}
							<div class="tools">
								<span class="analysis" @click.stop="showPopup(index)">查看解析</span>
								<div class="left-button" @click.stop="quit">退出答题</div>
								<div class="right-button" @click.stop="nextQ">下一题</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 答案错误 -->
				<div class="content-wrong" v-if="wrong">
					<div class="title">{{ index + 1 }}.{{ item.name }}</div>
					<div class="question-box" v-if="item.option">
						<div :class="item.op5 == 'A' ? 'question-correct' : wrongChoose == 'A' && index == current ? 'question-wrong' : 'question'">
							<span class="serial">A.</span>
							{{ item.option[0].title }}
						</div>
						<div :class="item.op5 == 'B' ? 'question-correct' : wrongChoose == 'B' ? 'question-wrong' : 'question'">
							<span class="serial">B.</span>
							{{ item.option[1].title }}
						</div>
						<div :class="item.op5 == 'C' ? 'question-correct' : wrongChoose == 'C' ? 'question-wrong' : 'question'">
							<span class="serial">C.</span>
							{{ item.option[2].title }}
						</div>
						<div :id="item.option.length == 5 ? '' : 'last'" :class="item.op5 == 'D' ? 'question-correct' : wrongChoose == 'D' ? 'question-wrong' : 'question'">
							<span class="serial">D.</span>
							{{ item.option[3].title }}
							<div class="tools" v-if="item.option.length == 4">
								<span class="analysis" @click.stop="showPopup(index)">查看解析</span>
								<div class="left-button" @click.stop="quit">退出答题</div>
								<div class="right-button" @click.stop="nextQ">下一题</div>
							</div>
						</div>
						<div v-if="item.option.length==5" :id="item.option.length == 5 ? 'last' : ''" :class="item.op5 == 'E' ? 'question-correct' : wrongChoose == 'E' ? 'question-wrong' : 'question'">
							<span class="serial">E.</span>
							{{item.option[4].title}}
							<div class="tools">
								<span class="analysis" @click.stop="showPopup(index)">查看解析</span>
								<div class="left-button" @click.stop="quit">退出答题</div>
								<div class="right-button" @click.stop="nextQ">下一题</div>
							</div>
						</div>
					</div>
				</div>
			</van-swipe-item>
			<template #indicator>
				<div class="custom-indicator">{{ current + 1 }}/{{ subject.length }}</div>
			</template>
		</van-swipe>
			<van-popup v-model="show" v-if="subject[current].answer" position="bottom" :style="{ height: '61%' }" round closeable :overlay="overlay" close="handleClose"><div class="analysis-content"><p>解析：</p>{{subject[current].answer}}</div></van-popup>
	</div>
</template>

<script>
import { Notify, Dialog } from 'vant';
export default {
	data() {
		return {
			width: '10vw',
			current: 0, //轮播图当前下标
			overlay: true, //不显示遮罩层
			normal: true, //未做时
			corrects: 0, //正确题目计数
			wrongs: 0, //错误题目计数
			correct: false, //答案正确
			wrong: false, //答案错误
			wrongChoose: 'd', //选择的错误答案
			show: false, //控制解析的显示与隐藏
			answerNotes: [],
			hasNotes: [],
			showResult: false,
			subject: []
		};
	},
	created() {
		// 创建页面时获取本地缓存 如果已经答过题 就把之前答题数据取出来
		// let notes = JSON.parse(localStorage.getItem('Notes'));
		this.hasNotes = notes;
		// 初始化进度条
		this.onChange(0);
		//初始化页面
		this.initPage();
	},
	components: {
		[Notify.Component.name]: Notify.Component,
		[Dialog.Component.name]: Dialog.Component
	},
	mounted() {
		// 获取题库
		this.getQuestion();
	},
	methods: {
		// 初始化页面
		initPage() {
			this.current = 0;
			this.corrects = 0;
			this.wrongs = 0;
			this.normal = true;
			this.correct = false;
			this.wrong = false;
			this.show = false;
			this.showResult = false;
		},
		// 获取题库
		getQuestion() {
			let openid = localStorage.getItem('openid');
			this.$axios
				.post('question/questionbase', { openid })
				.then(res => {
					if (res.data.code == 2000) {
						this.subject = res.data.data
					} else {
						Notify({ type: 'danger', message: res.data.msg });
					}
					console.log(this.subject);
					console.log(this.subject[0].option[0].title);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 轮播图切换事件
		onChange(index) {
			this.current = index;
			this.normal = true;
			this.correct = false;
			this.wrong = false;
			// 动态变更进度条长度
			this.width = ((index + 1) / this.subject.length) * 100 + 'vw';
		},
		showPopup(index) {
			console.log(index)
			this.show = true;
			this.current = index;
		},
		handleClose() {
			this.show = !this.show;
		},
		// 点击选项判断正误
		checkProper(index, correct, answer) {
			let answerNotes = this.answerNotes;
			this.normal = false;
			// 答案正确时
			if (correct == answer) {
				this.correct = true;
				this.corrects = this.corrects + 1;
				// 每次答完将纪录保存入数组
				// answerNotes.push({ id: index + 1, correct, answer });
				// 存储到本地缓存
				// let notes = JSON.stringify(answerNotes);
				// localStorage.setItem('Notes', notes);
			} else {
				// 答案错误时
				this.wrong = true;
				this.wrongChoose = answer;
				this.wrongs = this.wrongs + 1;
				// answerNotes.push({ id: index + 1, correct, answer });
				// 存储到本地缓存
				// let notes = JSON.stringify(answerNotes);
				// localStorage.setItem('Notes', notes);
			}
			console.log(answerNotes);
		},
		// 下一题,切换轮播
		nextQ() {
			// 先判断当前题目是否已经作答
			if (this.normal) {
				Dialog.alert({
					message: '您好像还没有作答哦'
				});
				return;
			}
			// 答完了显示成绩界面
			if (this.current == this.subject.length - 1) {
				this.showResult = true;
				return;
			}
			this.$refs.swiper.next();
		},
		// 退出答题
		quit() {
			Dialog.confirm({
				title: '提示',
				message: '确认离开答题界面吗？'
			})
				.then(() => {
					// on confirm
					this.$router.push('./questions');
				})
				.catch(() => {
					// on cancel
				});
		},
		//重新答题
		tryagain() {
			this.width = (1 / this.subject.length) * 100 + 'vw';
			this.initPage();
		}
	}
};
</script>

<style scoped lang="less">
.container {
	width: 100%;
	height: 100vh;
	.progress {
		background-color: #07c160;
		height: 0.3rem;
		position: fixed;
		top: 0;
		z-index: 9;
		left: 0;
	}
	.result_box {
		background: url(http://qnkf.laigl.com/mobilepng/questionback.png);
		width: 100%;
		height: 100%;
		z-index: 9;
		box-sizing: border-box;
		padding: 15vw 5vw;
		img:nth-child(1) {
			width: 4.8rem;
			height: 3.8rem;
			margin-bottom: 2rem;
		}
		.reuslt_title {
			font-size: 1.7rem;
			font-weight: bold;
			margin-bottom: 1.5rem;
			letter-spacing: 0.1rem;
		}
		.backimgs {
			margin-top: 4.2rem;
			width: 100vw;
			margin-left: -2rem;
			height: 4.5rem;
			img {
				width: 100%;
			}
			img:nth-child(2) {
				width: 2.5rem;
				height: 2.5rem;
				position: absolute;
				top: 18rem;
				right: 3rem;
				margin-bottom: 2rem;
			}
		}
		ul {
			li {
				display: block;
				font-size: 1.5rem;
				.total {
					color: #000;
					font-size: 3rem;
					font-weight: bold;
				}
				.right {
					color: #11b864;
					font-size: 3rem;
					font-weight: bold;
				}
				.wrongnum {
					color: #d83c3c;
					font-size: 3rem;
					font-weight: bold;
				}
			}
		}
		.confirmbtn,
		.againbtn {
			width: 100%;
			height: 4rem;
			box-sizing: border-box;
			text-align: center;
			color: #fff;
			display: flex;
			font-size: 1.2rem;
			align-items: center;
			justify-content: center;
			padding: 0.8rem;
			border-radius: 2rem;
			margin-bottom: 5vh;
			background: linear-gradient(to right, #1dc5d0, #0589c5);
		}
	}
	.van-swipe {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		.van-swipe-item{
			overflow: scroll;
		}
		.custom-indicator {
			position: absolute;
			width: 4rem;
			height: 1.2rem;
			text-align: center;
			right: 40%;
			top: 1.2rem;
			border-radius: 1.5rem;
			padding: 0.05rem 0.2rem 0.3rem 0.2rem;
			font-size: 1rem;
			border: 0.1rem solid #d0d4dd;
			line-height: 1.5rem;
			color: #d0d4dd;
			font-weight: 700;
		}
		// 未作题时的样式
		.content-normal {
			width: 90vw;
			min-height: 70vh;
			margin: 4.1rem 0 1rem 5vw;
			position: relative;
			.title {
				font-size: 1.3rem;
				font-weight: 700;
				margin-bottom: 3rem;
			}
			.question {
				box-sizing: border-box;
				width: 90vw;
				min-height: 3rem;
				padding: 1.1rem;
				background-color: #e3e4e9;
				margin-bottom: 1.5rem;
				border-radius: 0.2rem;
				color: #323553;
				font-weight: 600;
				font-size: 1.15rem;
				.serial {
					display: block;
					float: left;
					width: 1.5rem;
					height: 5rem;
				}
			}
		}
		// 答案正确时的样式
		.content-correct {
			min-height: 70vh;
			margin: 4.1rem 0 1rem 5vw;
			position: relative;
			width: 90vw;
			.title {
				font-size: 1.3rem;
				font-weight: 700;
				margin-bottom: 3rem;
			}
			.question-correct {
				background-color: #11b964;
				box-sizing: border-box;
				width: 90vw;
				min-height: 3rem;
				padding: 1.1rem;
				margin-bottom: 1.5rem;
				border-radius: 0.2rem;
				color: #fff;
				font-weight: 600;
				font-size: 1.15rem;
				.serial {
					display: block;
					float: left;
					width: 1.5rem;
					height: 5rem;
				}
			}
			.question {
				box-sizing: border-box;
				width: 100%;
				min-height: 3rem;
				padding: 1.1rem;
				background-color: #e3e4e9;
				margin-bottom: 1.5rem;
				border-radius: 0.2rem;
				color: #323553;
				font-weight: 600;
				font-size: 1.15rem;
				.serial {
					display: block;
					float: left;
					width: 1.5rem;
					height: 5rem;
				}
			}
		}
		// 答错时的样式
		.content-wrong {
			min-height: 70vh;
			position: relative;
			width: 90vw;
			margin: 4.1rem 0 1rem 5vw;
			.title {
				font-size: 1.3rem;
				font-weight: 700;
				margin-bottom: 3rem;
			}
			// .question-box{
			// 	min-height: 70vh;
			// }
			.question-correct {
				background-color: #e3e4e9;
				border: 0.1rem solid #0f0;
				box-sizing: border-box;
				width: 90vw;
				min-height: 3rem;
				padding: 1.1rem;
				margin-bottom: 1.5rem;
				border-radius: 0.2rem;
				color: #323553;
				font-weight: 600;
				font-size: 1.15rem;
				.serial {
					display: block;
					float: left;
					width: 1.5rem;
					height: 5rem;
				}
			}
			.question-wrong {
				background-color: #d83c3d;
				box-sizing: border-box;
				width: 100%;
				min-height: 3rem;
				padding: 1.1rem;
				margin-bottom: 1.5rem;
				border-radius: 0.2rem;
				color: #fff;
				font-weight: 600;
				font-size: 1.15rem;
				.serial {
					display: block;
					float: left;
					width: 1.5rem;
					height: 5rem;
				}
			}
			.question {
				box-sizing: border-box;
				width: 100%;
				min-height: 3rem;
				padding: 1.1rem;
				background-color: #e3e4e9;
				margin-bottom: 1.5rem;
				border-radius: 0.2rem;
				color: #323553;
				font-weight: 600;
				font-size: 1.15rem;
				.serial {
					display: block;
					float: left;
					width: 1.5rem;
					height: 5rem;
				}
			}
		}

		#last {
			position: relative;
			.tools {
				position: absolute;
				bottom: -9rem;
				left: 0;
				width: 100%;
				height: 9rem;
				.left-button {
					position: absolute;
					left: 0.5rem;
					bottom: 0rem;
					border: 0.1rem solid #000;
					width: 10.5rem;
					height: 2.9rem;
					text-align: center;
					line-height: 3rem;
					border-radius: 4rem;
					color: #000;
				}
				.right-button {
					position: absolute;
					right: 0.5rem;
					bottom: 0rem;
					background: linear-gradient(to right, #1dc5d0, #0589c5);
					width: 10.5rem;
					height: 3.2rem;
					text-align: center;
					line-height: 3rem;
					border-radius: 4rem;
					color: #fff;
				}
				.analysis {
					display: block;
					box-sizing: border-box;
					position: absolute;
					bottom: 4.8rem;
					left: 40%;
					z-index: 9;
					color: #c5c9d6;
					font-size: 1.1rem;
				}
			}
		}
	}
}
.van-popup {
	.analysis-content {
		padding: 2rem;
		font-weight: 600;
		p {
			font-weight: 700;
			font-size: 1.3rem;
			margin-bottom: 1.3rem;
		}
	}
}
</style>
